<template>
  <div id="app">
<!--    <div id="nav">-->
    <div style="height: 50px; background-color: #009be2">
      <div v-show="showSearch" style="float: right; position: relative; top: 0;right: 10px">
        <van-search placeholder="请输入搜索关键词"  v-on:click="search" style="width: 300px;margin: 10px 12px;padding: 0px 0px;"></van-search>
      </div>
    </div>
      <div>
        <el-carousel :interval="4000" type="card" height="300px" style="margin-top: 55px">
          <el-carousel-item v-for="item in images" :key="item">
            <el-image :src="item" style="width: 300px;height: 250px;margin-left: 0px"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

    <!--</div>-->
<!--    <div>-->
<!--      <swipe></swipe>-->
<!--    </div>-->
    <div>
<!--      <van-image-->
<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/dinner.png"-->
<!--              style="margin: 10px"-->
<!--      />-->
<!--      <van-image-->

<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/fruit.png"-->
<!--              style="margin: 10px"-->
<!--      />-->
<!--      <van-image-->
<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/dessert.png"-->
<!--              style="margin: 10px"-->
<!--      />-->
<!--      <van-image-->

<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/juice.png"-->
<!--              style="margin: 10px"-->
<!--      />-->
<!--      <van-image-->

<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/nuddle.png"-->
<!--              style="margin: 10px"-->
<!--      />-->
<!--      <van-image-->

<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/soda.png"-->
<!--              style="margin: 10px"-->
<!--      />-->
<!--      <van-image-->

<!--              width="50"-->
<!--              height="50"-->
<!--              src="pic/tea.png"-->
<!--              style="margin: 10px"-->
<!--      /><van-image-->

<!--            width="50"-->
<!--            height="50"-->
<!--            src="pic/wine.png"-->
<!--            style="margin: 10px"-->
<!--    />-->

    </div>
<!--          <van-tag color="#ffe1e1" size="large" text-color="#ad0000" ><van-icon name="fire-o" />hot</van-tag>-->
          <h4 style="display: inline-block;font-size: 34px; color: #1a1a1b">校园店铺</h4>
      <div class="main">
        <div v-for="(shop, index) in shops" :key="index" @click="toShop(shop)" class="cate">
         <div class="content">
           <div class="border" style="background-color: #ffffff">
             <img :src="shop.logoSrc" style="width: 186px;height: 170px" alt=""/>
             <span><h3 style="margin: 5px">{{shop.shopName}}</h3></span>
             <!-- <div class="rate">
               <el-rate
                   v-model="value"
                   disabled
                   show-score
                   text-color="#009be2"
                   score-template="{value}">
               </el-rate>
             </div> -->
             <div id="star">
                    <ul ref="star">
                        <li v-if="shop.star >=1" class="act">☆</li>
                        <li v-if="shop.star >=2" class="act">☆</li>
                        <li v-if="shop.star >=3" class="act">☆</li>
                        <li v-if="shop.star >=4" class="act">☆</li>
                        <li v-if="shop.star >=5" class="act">☆</li>

                        <li v-if="shop.star <1">☆</li>
                        <li v-if="shop.star <2">☆</li>
                        <li v-if="shop.star <3">☆</li>
                        <li v-if="shop.star <4">☆</li>
                        <li v-if="shop.star <5">☆</li>
                    </ul>
                    <span id="scorce">{{shop.star}}分</span>
                </div>
             <span>×月售{{shop.totalSales}}</span>
           </div>
         </div>
        </div>
      </div>
<!--      <van-card  v-for="(shop,index) in shops" :key="index" @click="toShop(shop)" style="background-color: #fced6e;line-height: 80px;display: flex">-->
<!--          <template #title>-->
<!--              <span><h3 style="margin: 5px">{{shop.shopName}}</h3></span>-->
<!--          </template>-->
<!--        <template #num>-->
<!--            <span>×月售{{shop.totalSales}}</span>-->
<!--        </template>-->
<!--          <template #thumb>-->
<!--              <img :src="shop.logoSrc" style="width: 100px;height: 100px" alt=""/>-->
<!--          </template>-->
<!--      </van-card>-->

    <!--填充-->
  </div>
</template>

<script>
  import Swipe from "../../views/user/Swipe.vue";
  export default {
    components:{
      Swipe
    },
    methods:{
        /*跳转到搜索页面*/
      search(){
        this.showSearch=false;
        this.$router.replace({
            path:'/search',
        });
      },

      /*跳转到商铺页面*/
      toShop(shop){
        this.$router.push({
            name:"shop",
            params:{
                shop: shop
            }
        });
      },

    },

      created(){
        /*初始化数据，获取首页的店铺*/
          this.axios.get("http://localhost:8084/findShopOrderBySales")
              .then(resp=>{
                  console.log(resp.data);
                  this.shops = resp.data;
          })
      },

    data() {
      return {
        images:[
          '/upload/p1.png',
          '/upload/p2.jpg',
          '/upload/p3.jpg',


        ],
        url:'../../public/upload/p1.png',
        value: 3.7,
        // value:'',
        shops:[
          /*{
          sid: 1,
          logoSrc:"https://img01.yzcdn.cn/vant/ipad.jpeg",
          totalSales: "3576",
          shopName:"华莱士·全鸡汉堡",
          minCost:20,
          deliveryCost:0,
          },
          {
              id: 2,
              logoSrc:"https://img01.yzcdn.cn/vant/ipad.jpeg",
              totalSales: "4696",
              shopName:"汉堡王",
              minCost:20,
              deliveryCost:5,
          },
          {
              id: 3,
              logoSrc:"https://img01.yzcdn.cn/vant/ipad.jpeg",
              totalSales: "4696",
              shopName:"汉堡王",
              minCost:20,
              deliveryCost:5,
          },
          {
              id: 4,
              logoSrc:"https://img01.yzcdn.cn/vant/ipad.jpeg",
              totalSales: "4696",
              shopName:"汉堡王",
              minCost:20,
              deliveryCost:5,
          }*/
        ],
        homeShow:true,
        showSearch:true,
        show:true,
        active: 'home'
      };
    },
  };
</script>
<style scoped>

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background-color: white;
  }
  .main {
    display: flex;
    /*align-items: center;*/
    padding: 0 30px;
    /*justify-content: center;*/
    flex-wrap: wrap;
    /*border: 1px solid #B3C0D1;*/
  }
.cate {
  /*padding: 20px;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  flex-wrap: wrap;
  flex: 1;
  /*border: 1px solid #B3C0D1;*/
}
.border {
  border: 1px solid #AAAAAA;
}
.content {

  padding: 40px 34px;
}
span {
  flex: 1;
}
.rate {
  margin: 16px 0;
}
  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }

  #star ul{
      margin-right: 10px;
      display: inline;
    }
  
    #star ul li{
      display:inline;
      margin:0 2px;
      cursor:pointer;
      border-radius: 50%;
    }
    #star .act{
      color: #ff2a27;
      background-color: yellow;
    }
</style>
